<template>
  <div class="pay">
    <div class="pay-header">
      <div class="money">支付金额：¥{{price}}</div>
      <div class="order-id">订单编号：{{order_id}}</div>
    </div>
    <div class="pay-con">
      <div class="pay-list" @click="selectWay(1)">
        <div class="list-con">
          <div class="list-title">微信支付</div>
          <div class="list-sub">推荐安装微信6.0.2及以上版本</div>
        </div>
        <div :class="[hadSelect==1 ? 'select' : '','range']"></div>
      </div>
      <div class="pay-list" @click="selectWay(2)">
        <div class="list-con">
          <div class="list-title">余额支付</div>
          <div class="list-sub">用账户余额支付</div>
        </div>
        <div :class="[hadSelect==2 ? 'select' : '','range']"></div>
      </div>
    </div>
    <div class="hadpay" @click="pay">确认支付</div>

    <!-- 支付弹窗 -->
    <div class="wallets-bg" v-show="showWallets" @click="closeWallets">
      <div class="wallets">
        <div class="title">请输入支付密码</div>
        <div class="money"><span>¥</span>{{price}}</div>
        <div class="wallets-input" @click="focus">
          <div class="input"><i v-show="passWord.length>0"></i></div>
          <div class="input"><i v-show="passWord.length>1"></i></div>
          <div class="input"><i v-show="passWord.length>2"></i></div>
          <div class="input"><i v-show="passWord.length>3"></i></div>
          <div class="input"><i v-show="passWord.length>4"></i></div>
          <div class="input"><i v-show="passWord.length>5"></i></div>
        </div>
        <div class="wallets-close iconfont icon-close"></div>
      </div>
      <input type="number" class="div-input" v-model="passWord" maxlength="6" autofocus="autofocus" ref="input"/>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'pay',
  components: {},
  data() {
    return {
      order_id: 0,
      room_desk_id: 0,
      price: 0,
      hadSelect: 1,
      passWord: '',
      showWallets: false
    }
  },
  activated() {
    console.log(this.$route.params)
    this.order_id = this.$route.params.order_id;
    this.room_desk_id = this.$route.params.room_desk_id;
    this.price = this.$route.params.price
  },
  watch: {
    passWord() {
      if(this.passWord.length == 6) {
        axios.post('api/pay',{pay_way:'zhanglitong',order_id:this.order_id,pay_port:'web',payword: this.passWord}).then( res => {
          console.log(res)
          if( res.data.code == 200) {
            this.$toast('支付成功！')
            let that = this
            setTimeout(function() {
              that.$router.push({path: '/'})
            },2000)
            
          }else {
            this.$toast(res.data.info)
          }
        })
      }
    }
  },
  methods: {
    selectWay(index) {
      this.hadSelect = index
      
    },
    focus() {
      this.$refs.input.focus()
    },
    pay() {
      console.log(this.hadSelect)
      if(this.hadSelect == 1) {
        window.location.href="https://www.zltgs.com/api/scan_h5?order_id="+this.order_id+"&room_desk_id="+this.room_desk_id
      }else {
        axios.post('api/isSetPayword').then( res => {
          if(res.data.data.isSetPayword == true) {
            this.showWallets = true
          }else {
            this.$toast('您暂时不能使用余额支付')
          }
        })
        //this.showWallets = true
      }
    },
    closeWallets(e) {
      if(e.target.className == 'wallets-bg' || e.target.className == 'wallets-close iconfont icon-close'){
        this.showWallets = false
        this.passWord = ''
      }
    }
  }
} 
</script>

<style lang="stylus" scoped>
@import "~styles/common.styl"
  .pay
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    background #f6f6f6
    .pay-header
      padding 25px 15px
      background #ffffff
      margin-top 20px
      .money
        font-size 20px
        color #da1e4b
        font-weight bold
      .order-id
        margin-top 15px 
        color #333
        font-size 14px
    .pay-con
      background #ffffff
      margin-top 25px
      .pay-list
        padding 20px
        position relative
        display flex
        justify-content space-between
        align-items center
        &::after
          content ''
          position: absolute
          height: 2px
          -webkit-transform: scale(1,.5)
          transform: scale(1,.5)
          -webkit-transform-origin: 0 bottom
          transform-origin: 0 bottom
          bottom: 0
          left 0.3rem
          right 0
          border-bottom: 1px solid #e1e1e1
        .list-con
          .list-title
            font-size 17px
            color #333
          .list-sub
            font-size 14px
            color #999
            margin-top 5px
        .range
          width 25px
          height 25px
          border-radius 50%
          border 1px solid #dddddd
          &.select
            background #4fc08d
            border 1px solid #4fc08d
    .hadpay
      width 80%
      height 45px
      line-height 45px
      text-align center
      color #ffffff
      background #4fc08d
      border-radius 5px
      margin 20px auto
      font-size 17px

    .wallets-bg
      position absolute
      top 0
      left 0
      right 0
      bottom 0
      background rgba(0,0,0,0.7)
      overflow hidden
      .wallets
        position:absolute;
        top:2rem;
        left:50%;
        display:flex;
        flex-direction:column;
        width:6rem;
        margin-left:-3rem;
        background:#fff;
        border-radius:10px;
        .title
          height 0.9rem
          line-height 0.9rem
          text-align center
          border-bottom:1px solid #ddd
          font-size 18px
        .money
          display:flex;
          align-items:center;
          justify-content:center;
          color:#000;
          height:1rem;
          margin:0 10px;
          border-bottom:1px solid #ddd
          font-size 20px
          span
            font-size 13px
            margin-right 3px
        .wallets-input
          display:flex;
          align-items:center;
          justify-content:center;
          height:150rpx;
          padding 10px 0
          .input
            display:flex;
            align-items:center;
            justify-content:center;
            text-align:center;
            color:#000;
            box-sizing:border-box;
            width:0.9rem;
            height:0.9rem;
            border:1px solid #ddd;
            border-left:none 0;
            &:nth-child(1)
              border-left:1px solid #ddd;
            i 
              background:#000;
              border-radius:50%;
              width:0.2rem;
              height:0.2rem;
        .wallets-close
          position absolute
          width 25px
          height 25px
          line-height 25px
          text-align center
          top 2px
          right 2px
          font-size 14px
      .div-input
        position absolute
        top 0
        left -100%
</style>